<template>
  <view class="container">
    <map style="width: 100%; height: 816rpx" :scale="scale" :markers="covers" :latitude="latitude" :longitude="longitude">
      <cover-view slot="callout">
        <block v-for="(item, index) in covers" :key="index">
          <cover-view class="customCallout" :marker-id="item.id">
            <cover-view class="content">{{ item.title }}</cover-view>
          </cover-view>
        </block>
      </cover-view>
    </map>
    <image src="../../static/images/indexposition.png" style="width: 64rpx; height: 64rpx; position: fixed; top: 572rpx; right: 32rpx" mode=""></image>
    <!-- 打车时间计时 -->
    <view id="box" :style="{ height: boxheight + 'px' }" class="box">
      <!-- 司机图片 -->
      <image src="../../static/order/driver.png" style="width: 176rpx; height: 214rpx; position: absolute; top: -50rpx; right: 0" mode=""></image>

      <!-- 倒计时 -->
      <view class="countdown">{{ time }}</view>
      <view class="tip">倒计时结束，需要重新呼叫代驾司机</view>
      <view class="callbtn">
        <text>暂无司机接单-联系客服</text>
        <image src="../../static/order/phone.png" style="width: 31rpx; height: 31rpx" mode=""></image>
      </view>
      <view class="cancelbtn" @click="$refs.cancel.open()">取消订单</view>
    </view>
    <!-- 取消订单弹框 -->
    <uni-popup ref="cancel" type="center">
      <view class="cancelbox">
        <view class="title">确认取消该订单？</view>
        <view class="btn">
          <view class="btn1" @click="$refs.cancel.close()">我再想想</view>
          <view class="btn2" @click="cancelorder">确认取消</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      timer: null, //定时器
      timer2: null, // 轮询
      obj: {},
      orderid: '', // 订单id
      boxheight: '',
      countdown: 0, //倒计时
      time: '00:00',
      latitude: 39.909,
      longitude: 116.39742,
      testMinute: 10,
      testSecond: 0,
      covers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/images/start.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        },
        {
          id: 2,
          latitude: 39.9,
          longitude: 116.39,
          iconPath: '/static/images/end.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        }
      ],
      scale: 12
    };
  },

  methods: {
    // 取消订单
    cancelorder() {
      this.http('/order/cancelOrder', {
        order_id: this.orderid
      });
      console.log(11111);
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    // 获取订单详情
    getdetail() {
      this.http('/order/details', {
        order_id: this.orderid
      }).then((res) => {
        console.log('订单详情', res);
        this.obj = res.data;
        if (res.data.status == 2) {
          if (this.timer) {
            clearInterval(this.timer);
          }
          this.time = dayjs(this.obj.timestamp * 1000 - new Date().getTime()).format('mm:ss');
          this.timer = setInterval(() => {
            if (this.obj.timestamp * 1000 - new Date().getTime() > 0) {
              this.time = dayjs(this.obj.timestamp * 1000 - new Date().getTime()).format('mm:ss');
              console.log('剩余时间', this.time);
            } else {
              this.http('/order/cancelOrder', {
                order_id: this.orderid
              });
              uni.reLaunch({
                url: '/pages/index/index'
              });

              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        } else if (res.data.status == 3) {
          uni.redirectTo({
            url: '/order/reciveorder/reciveorder?orderid=' + this.orderid
          });
        }

        this.covers[0].title = res.data.starting;
        this.latitude = res.data.start_lat;
        this.longitude = res.data.start_lng;
        this.covers[0].latitude = res.data.start_lat;
        this.covers[0].longitude = res.data.start_lng;
        this.covers[1].title = res.data.end;
        this.covers[1].latitude = res.data.edn_lat;
        this.covers[1].longitude = res.data.edn_lng;
      });
    }
  },
  onLoad(opt) {
    if (opt.orderid) {
      this.orderid = opt.orderid;
    }
    this.getdetail();
    this.timer2 = setInterval(() => {
      this.getdetail();
    }, 5000);
  },
  onShow() {
    // 获取剩余高度
    uni.getSystemInfo({
      success: (e) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#box')
          .boundingClientRect((data) => {
            this.boxheight = e.screenHeight - data.top;
            console.log('节点离页面顶部的距离为' + this.boxheight);
          })
          .exec();
      }
    });
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
    if (this.timer2) {
      clearInterval(this.timer2);
      this.timer2 = null;
    }
  },
  onHide() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
    if (this.timer2) {
      clearInterval(this.timer2);
      this.timer2 = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.customCallout {
  box-sizing: border-box;
  background-color: #32b499;

  border-radius: 30rpx;
  display: inline-flex;
  padding: 6rpx 24rpx;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container {
  box-sizing: border-box;
  height: 100vh;
  overflow: hidden;
  .box {
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 632rpx;
    padding-top: 82rpx;
    background: linear-gradient(179deg, #c5ddff 0%, #ffffff 100%);
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    .countdown {
      font-weight: bold;
      font-size: 48rpx;
      color: #222222;
      text-align: center;
      margin-bottom: 24rpx;
    }
    .tip {
      text-align: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
    }
    .callbtn {
      width: 654rpx;
      height: 92rpx;
      text-align: center;
      line-height: 92rpx;
      background: #3483f6;
      margin-left: 48rpx;
      color: #fff;
      font-weight: 500;
      font-size: 30rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-top: 94rpx;
    }
    .cancelbtn {
      width: 654rpx;
      height: 92rpx;
      background: #f2f2f2;
      text-align: center;
      line-height: 92rpx;
      margin-top: 28rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #666666;
      margin-left: 48rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
  .cancelbox {
    box-sizing: border-box;
    width: 520rpx;
    height: 274rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding-top: 64rpx;
    .title {
      font-weight: bold;
      font-size: 30rpx;
      color: #222222;
      text-align: center;
      margin-bottom: 68rpx;
    }
    .btn {
      display: flex;
      align-items: center;
      .btn1 {
        width: 260rpx;
        height: 98rpx;
        text-align: center;
        line-height: 98rpx;
        border-top: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
      }
      .btn2 {
        width: 260rpx;
        height: 98rpx;
        text-align: center;
        border-top: 1px solid #e7e7e7;
        line-height: 98rpx;
      }
    }
  }
}
</style>
